<!--
 * @Author: wang_changtan 2196064304@qq.com
 * @Date: 2024-02-21 11:44:11
 * @LastEditors: wang_changtan 2196064304@qq.com
 * @LastEditTime: 2024-02-26 10:50:00
 * @FilePath: /web_music_app_vue3_vite_ts/src/views/aside/boke/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="s_container">
        <img v-show="data.selectedKey !== 'zongy'" class="h_img" :src="`/src/assets/jpg/${(data.selectedKey === 'lingl' ?'dianz':  data.selectedKey) || 'allSong'}.jpg`" alt="">

        <div class="son_tab">
            <div class="title">
                {{ getName() }}
                <svg style="padding-left: 4px;" t="1708654847616" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="58497" width="16" height="16">
                    <path
                        d="M353.045333 86.826667L754.56 488.362667a32 32 0 0 1 2.090667 42.965333l-2.090667 2.282667L353.066667 935.168a8.533333 8.533333 0 0 1-6.037334 2.496h-66.368a8.533333 8.533333 0 0 1-6.037333-14.570667L686.72 511.018667 274.602667 98.901333a8.533333 8.533333 0 0 1 6.037333-14.570666h66.346667a8.533333 8.533333 0 0 1 6.058666 2.496z"
                        :fill="themeName !== 'dark' ? '#707070' : '#797979'" p-id="58498"></path>
                </svg>
            </div>
            <div class="t_item">
                <div class="item_name" :class="item.key === data.selectedKey ? 'active' : ''"
                    v-for="(item, index) in data.sonTabs" :key="index" @click="itemClick(item)">
                    {{ item.name }}
                </div>
            </div>
        </div>

        <el-row :gutter="20">
            <el-col :span="6" v-for="(item, i) in data.sonArr" :key="i">
                <div class="item-grid">
                    <div class="g-item">
                        <div class="g-item-img">
                            <div class="g-desc">
                                <svg t="1708656960367" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="60443" width="14" height="14">
                                    <path
                                        d="M224 938.713333a53.58 53.58 0 0 1-53.333333-53.433333V138.72a53.333333 53.333333 0 0 1 80.886666-45.666667l618.666667 373.28a53.333333 53.333333 0 0 1 0 91.333334l-618.666667 373.28a53.16 53.16 0 0 1-27.553333 7.766666z m0.046667-810.666666a10.98 10.98 0 0 0-5.333334 1.42 10.466667 10.466667 0 0 0-5.38 9.253333v746.56a10.666667 10.666667 0 0 0 16.18 9.133333l618.666667-373.28a10.666667 10.666667 0 0 0 0-18.266666l-618.666667-373.28a10.386667 10.386667 0 0 0-5.446666-1.586667z"
                                        fill="#ffffff" p-id="60444"></path>
                                </svg>
                                <span style="padding-left: 5px;"> {{ dealNumber(11111) }}</span>
                            </div>
                            <div class="img-start">
                                <img src="/src/assets/svg/start.svg" alt="">
                            </div>
                        </div>
                        <div class="g-i-desc">每日歌曲推荐</div>
                    </div>
                </div>
            </el-col>
        </el-row>

    </div>
</template>



<script setup lang="ts">
import { dealNumber } from "@/utils/index";
import { onMounted, reactive, computed, onUpdated } from "vue";
import { jsonPost, } from "@/axios/index";
import { useRouter } from "vue-router";
const router = useRouter();
import useGlobalStore from "../../store/modules/global";
//获取小仓库对象
let globalStore = useGlobalStore();
const themeName = computed(() => globalStore.themeName);
const currentPath = computed(() => globalStore.currentPath);
const data = reactive({
    selectedKey: '',
    sonTabs: [
        { name: '华语', key: 'huayu' },
        { name: '流行', key: 'liux' },
        { name: '摇滚', key: 'yaog' },
        { name: '民谣', key: 'mingy' },
        { name: '电子', key: 'dianz' },
        { name: '另类/独立', key: 'lingl' },
        { name: '轻音乐', key: 'qingyy' },
        { name: '综艺', key: 'zongy' },
        { name: '影视原声', key: 'tvys' },
        { name: 'ACG', key: 'acg' },
    ],
    sonArr: [
        { name: "xxxx", number: 1111 }
    ]
});
function getName() {
    // console.log(data)
    let obj = data.sonTabs.find(s => s.key === data.selectedKey);
    if (obj && obj.name) {
        return obj.name
    }
    return '全部歌单'
}

function itemClick(item) {
    data.selectedKey = item.key;
    let path = `songSheet?selectedKey=${item.key}`
    globalStore.updateStateByKeys({
        backLeft: [
            ...globalStore.backLeft,
            currentPath
        ],
        backRight: []
    });
    router.push(path);
    // router.push({path: 'songSheet',params:{selectedKey: item.key}})
}

function initData() {

}

/**
 * 生命周期
 * */
onMounted(() => {
    console.log('onMounted', currentPath);
    changeKeyByPath();
});
onUpdated(() => {
    console.log('onUpdated-currentPath', currentPath);
    changeKeyByPath(true);
})

function changeKeyByPath(update = false) {
    if (currentPath && currentPath.value.indexOf('selectedKey')) {
        let k = currentPath.value.split('=')[1];
        // 避免实时刷新
        if (update) {
            if (data.selectedKey !== k) {
                data.selectedKey = k || '';
                initData();
            }

        } else {
            data.selectedKey = k || '';
            initData();
        }

    }
}

</script>
<style scoped lang="less">
.s_container {
    height: calc(100% - 30px);
    padding: 15px;
    box-sizing: border-box;

    .h_img {
        border-radius: 8px;
        width: 100%;
        height: 180px;
        cursor: pointer;
    }

    .son_tab {
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        div {
            color: @color;
        }

        .title {
            font-size: 14px;
            border: 1px solid @fzFontColor;
            padding: 2px 15px;
            border-radius: 20px;
            display: flex;
            align-items: center;
        }

        .t_item {
            display: flex;
            align-items: center;

            .item_name {
                margin: 0 10px;
                padding: 2px 8px;
                font-size: 12px;
                cursor: pointer;
                border-radius: 10px;

                &:hover {
                    color: #d33a31;
                    background-color: @fzSeledBg;
                }
            }

            .active {
                color: #d33a31;
                background-color: @fzSeledBg;
            }
        }
    }

    .item-grid {
        padding-top: 15px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .g-item {
            width: 100%;
            cursor: pointer;

            .g-item-img {
                position: relative;
                width: 100%;
                height: 150px;
                border-radius: 6px;
                background-color: #f8f8f8;

                .g-desc {
                    display: flex;
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 100%;
                    color: #fff;
                    font-size: 13px;
                    box-sizing: border-box;
                    text-align: right;
                    padding-top: 5px;
                    padding-right: 10px;
                    align-items: center;
                    justify-content: flex-end;
                }

                .img-start {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 30px;
                    height: 30px;
                    position: absolute;
                    right: 10px;
                    bottom: 10px;
                    border-radius: 50%;
                    background-color: #ebebeb;
                    opacity: 0;

                    img {
                        width: 20px;
                        height: 20px;
                    }
                }
            }


            .g-i-desc {
                padding-top: 8px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                color: @color;
                font-size: 14px;

                &:hover {
                    color: @hoverColor;
                }
            }
        }
    }
}
</style>